<template>
  <div>
    <el-container style="height: 850px; border: 4px solid #eee">
  <el-container>
    <el-header style="height:100px">
      <img class="logo" alt="logo" :src="require('./../../assets/logo1.png')"/>
        <div class="avator" style="text-align: right; float:right">
            <div>
              <el-avatar :size="65" src="https://ftp.bmp.ovh/imgs/2021/06/8691b8db5223ac81.jpg"></el-avatar>
            </div>
        </div>
    </el-header>

    <el-main style="min-width:1024px">
      <el-menu class="el-menu" mode="horizontal" >
        <el-menu-item index="1" style="margin-top:-15px; margin-right:140px; margin-left:350px" @click="createProject">新建问卷
          <i class="el-icon-circle-plus-outline"></i>
        </el-menu-item>
        <el-menu-item index="2" style="margin-top:-15px; margin-right:140px; margin-left:40px" @click="myProject">我的问卷
          <i class="el-icon-document"></i>
        </el-menu-item>
        <el-menu-item index="3" style="margin-top:-15px; margin-right:140px; margin-left:80px" @click="recycleProject">回收站
          <i class="el-icon-delete"></i>
        </el-menu-item>
      </el-menu>

      <el-form ref="form" label-width="100px">
        <el-form-item style="margin-top:25px">
          <!-- <label class="el-form-item-label" style="width: 100px; margin-left:10px">项目状态</label>
          <el-radio-group  size="small" v-model="queryParams.status" style="margin-left:15px" @change="()=>{this.queryParams.current=0,this.queryProjectPage()}">
            <el-radio-button v-for="status in projectStatusList" :key="status.code" :label="status.code">
                {{ status.name }}
            </el-radio-button>
          </el-radio-group> -->
          <el-input v-model="queryParams.title" placeholder="请输入内容" style="float: right; width: 10%; margin-top: -5px; margin-right: 300px;" type="text"></el-input>
          <el-button type="primary" icon="el-icon-search" style="padding: 10px 6px; font-size: 10px; border-radius: 10px; float: right; margin-right: -200px; margin-top: -3px;" >搜索</el-button>
        </el-form-item>
      </el-form>

      
        <div class="project-grid-container" style="position:absolute">
            <div
                v-if="projectList.length"
                class="project-grid-view"
            >
                <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer">
                    <el-row type="flex" align="middle" justify="center">
                        <el-col :span="5" style="width: 20.83333%;">
                            <span
                                :style="getStatusColorStyle(p.stats)"
                                class="project-grid-view-status"
                            />
                        </el-col>
                        <el-col :span="19" style="width: 79.16667%;">
                            <el-tooltip :content="p.title" placement="top">
                                <p class="project-title" >
                                    {{ p.title }}
                                </p>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <img class="project-grid-view-preimg"
                         src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/pic%20(1).png"
                         style="width: 143px; height: 121px;"
                    >
                    <p class="project-grid-view-time">创建时间：{{ formatData(p.createTime) }}</p>
                    <div class="gird-operating-btns">
                        <el-button v-if="p.stats==3" type="text" @click="toProjectHandle(p.projectKey,1)">
                            <i class="el-icon-edit" />
                            恢复
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="project-page-view" style="position: absolute; margin-top: 510px; margin-left:500px ">
            <el-pagination v-if="total>10" background :page-size="queryParams.size" :current-page.sync="queryParams.current" layout="total, prev, pager, next" :total="total" @current-change="queryProjectPage"/>
        </div>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import axios from 'axios'
import {postKeyValueRequest,postRequest,getRequest,getRequest2} from '@/api/api'
let projectStatusList=[
  {code:1,name:'未发布',color:'#006EFF'},
  {code:2,name:'收集中',color:'#34C82A'},
  {code:3,name:'已结束',color:'#955A45'}
]
  export default {
    name:'Home',
    data() {
      return{
        total:0,
        queryParams:{
          current: 1,
          size: 10,
          title: '',
          status: null
        },
        projectStatusList: projectStatusList,
        projectList: [],
        projectKey: ''
      }
    },
    computed: {
      getStatusColorStyle(){
        return function(code){
          let color = this.projectStatusList.find(item => item.code == code).color
          return {
            backgroundColor: color,
            borderColor: color
          }
        }
      }
    },
    // created(){
    //   this.queryProjectPage()
    // },
    mounted(){
      this.queryProjectPage()
    },
    methods:{
      formatData(time){
         return dayjs(time).format('YYYY/MM/DD')
      }, 
      toProjectHandle(key,type){
        getRequest(`/project/change/recovery?key=${key}`).then(resp=>{
            console.log(resp)
        })
        location.reload()
      },
      createProject(){
        //this.$router.replace('/admin/create');
        //this.$router.push({path: '/admin/create', query: {key: key, active: type}})
        var user = window.sessionStorage.getItem("user")
        user = JSON.parse(user)
        axios.post('project/createProject?userId=' + user.id).then(resp=>{
          console.log(user)
          console.log(resp)
          this.$router.push({path: '/admin/create', query: {key: resp.data}})
        })
      },
      myProject(){
        this.$router.replace('/admin/home');
      },
      recycleProject(){
        location.reload();
      },
      queryProjectPage(){
        const _this = this
        var baseUrl = 'project/myProject?current=' + this.queryParams.current + '&size=' + this.queryParams.size + '&isDeleted=true'
        axios.get(baseUrl).then(resp=>{
          if(resp){
            let {records, total, size} = resp.data
            _this.projectList = records
            _this.total = total
            _this.queryParams.size=size
          }
        })
      }
    }
  };
</script>


<style>
  .el-header {
    background-color:	#87CEFA;
    line-height: 80px;
  }

  .avator {
    padding: 15px 30px;
  }

  .project-grid-container{
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .project-grid-view {
    display: flex;
    width: 950px;
    height:485px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .project-grid-item-view:hover .gird-operating-btns {
      display: block;
  }
  .project-grid-item-view {
    width: 169px;
    height: 199px;
    line-height: 20px;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
    -webkit-box-shadow: 0 3px 6px 3px rgba(0,0,0,.12);
    box-shadow: 0 3px 6px 3px rgba(0,0,0,.12);
    margin: 10px;
    position: relative;
  }
  .project-title {
    color: #101010;
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    max-height: 20px;
  }
  .project-grid-view-time {
    color: #909399;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin: 0;
  }
  .gird-operating-btns {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    bottom: 0;
    display: none;
    border: none;
  }
  .pink-text-btn {
    color: #e65d6e;
  }
  .project-grid-view-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    line-height: 20px;
    background-color: rgba(0, 110, 255, 100);
    text-align: center;
    border: 1px solid rgba(0, 110, 255, 100);
    border-radius: 20px;
  }

</style>

